<header class="page-header clearfix">
    <h4><i class="fa fa-exclamation-triangle"></i>告警信息</h4>
    <ol class="breadcrumb">
        <li><a>告警</a></li>
        <li class="active">告警信息</li>
    </ol>
</header>
<section>
    <ui-panel class="panel-list">
        <form class="form-inline form-search" ng-submit="list.search()">
            <div class="form-group">
                <select ng-model="list.filter.clusterInst" class="form-control"
                        ng-options="opt as opt.clusterName for opt in ::list.clusters">
                </select>
            </div>
            <div class="form-group">
                <input type="text" maxlength="50" ng-model="list.filter.alertType" class="form-control" placeholder="请输入告警类型"/>
            </div>
            <div class="form-group">
                <select ng-model="list.filter.isactive" class="form-control"
                        ng-options="opt.val as opt.name for opt in ::list.typeList">
                </select>
            </div>
            <div class="form-group date-group-left">
                <input id="startTime" name="startTime" maxlength="50" class="form-control" max-Date="list.datepicker.max"
                       ui-datepicker-popup type="text" ng-model="list.filter.startTime" view="datetime"
                       format="yyyy-MM-dd HH:mm:ss" placeholder="请选择告警开始时间"/>
            </div>
            <div class="form-group date-group-right">
                <input id="endTime" name="endTime" maxlength="50" class="form-control" max-Date="list.datepicker.max"
                       ui-datepicker-popup type="text" ng-model="list.filter.endTime" view="datetime"
                       format="yyyy-MM-dd HH:mm:ss" placeholder="请选择告警结束时间"/>
            </div>
            <button class="btn btn-default" type="submit">查询</button>
        </form>
        <table class="table table-hover">
            <thead>
            <tr>
                <th width="15%">告警类型</th>
                <th width="20%">告警实例</th>
                <th width="40%">告警内容</th>
                <th width="10%">状态</th>
                <th width="15%">告警时间</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="elem in list.table">
                <td>
                    <a href="javascript:void(0)" ng-click="list.openDetailForm(elem)">{{::elem.alertType}}</a>
                </td>
                <td>{{::elem.content}}</td>
                <td>{{::elem.message}}</td>
                <td ng-switch="::elem.isActive">
                    <span class="text-danger" ng-switch-when="true">未处理</span>
                    <span class="text-success" ng-switch-when="false">已处理</span>
                </td>
                <td>{{::elem.insertTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
            </tr>
            </tbody>
        </table>
        <!--Loading-->
        <div class="loading" ng-show="!list.table"></div>
        <!--分页-->
        <div ng-show="list.table" class="pagination-group">
            <ui-pagination-info items-per-page="::list.page.perPage" items-per-page-select="false"
                                total-items="list.page.totalItems"
                                current-page="list.page.currentPage"></ui-pagination-info>
            <button type="button" ng-click="list.getList()" class="btn btn-default btn-refresh"><i
                    class="fa fa-refresh"></i></button>
            <ui-pagination items-per-page="::list.page.perPage" total-items="list.page.totalItems"
                           ng-model="list.page.currentPage" ng-change="list.getList()"></ui-pagination>
        </div>
    </ui-panel>
</section>